<template>
    <a-modal v-model:visible="visible" title='盘头组详情:ZZ201119007' width="90%" @ok="handleOk" @cancel="handleCancel">
        <div style=" width: 95%;margin: 0 auto; ">
            <div>
                <table class="font15" style="width: 100%;border: 1px solid black;padding: 10px 0px">
                    <tr v-for="(item, index) in list" :key="index">
                        <td class="center pd4">{{ item.key }}</td>
                        <td class="center pd4">{{ item.value }}</td>
                        <td class="center pd4">{{ item.key1 }}</td>
                        <td class="center pd4">{{ item.value1 }}</td>
                    </tr>
                </table>
                <br />
                <a-table :dataSource="dataSource" :columns="columns" :scroll="{ x: 1500 }" bordered>
                    <template #title>盘头列表</template>
                </a-table>

            </div>
        </div>
    </a-modal>
</template>
<script lang="ts" setup>

import { defineProps, ref, defineExpose } from 'vue'
import { Modal as AModal } from 'ant-design-vue';
// 控制弹窗组件显示隐藏
const props = defineProps({
    columns: {
        type: Array,
        default: []
    },
    list: {
        type: Array,
        default: []
    },
    dataSource: {
        type: Array,
        default: []
    }
})

const visible = ref(false)



function openModal() {
    visible.value = true
}

function handleOk() {
    visible.value = false
}
function handleCancel() {
    visible.value = false
}
defineExpose({ openModal })
</script>
<style lang="less" scoped>
.font15 {
    font-size: 15px;
}

.center {
    text-align: center;
}

.pd4 {
    padding: 4px;
    min-width: 50px;
    border: 1px solid black;
}

.between {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
}

.register_title {
    flex-basis: 25%;
    text-align: right;
    line-height: 40px;
}

.register_input {
    padding: 0 10px;
    flex: 1;
}
</style>